<template>
  <div class="app-container">
    <!--求职意向-->
    <el-row :gutter="20">
      <!--求职意向选项卡-->
      <el-col :span="24">
        <el-menu default-active="1" class="el-menu-demo" mode="horizontal">
          <el-menu-item index="1"><span style="font-weight: bolder;font-size: 20px; color: #2788f3;">求职意向</span></el-menu-item>
        </el-menu>
      </el-col>
      <!--求职意向选项卡-->
      <!--求职意向-->
      <el-col :span="24">
        <el-card
          style="
                margin-top: 10px;
                padding-bottom: 10px;
                width: 100%;"
          shadow="hover">
          <div>

            <!--求职意向标题-->
            <div class="job-status__title">
              求职意向
              <span class="job-status__title__must">必填</span>
            </div>
            <!--求职意向标题-->

            <!--编辑按钮 -->
            <div  style="float: right">
              <el-button type="success" size="medium" @click="handleAddDialog"><i class="el-icon-plus"></i>&nbsp;&nbsp;新增求职意向</el-button>
            </div>
            <!--编辑按钮-->

            <!--求职意向列表展示-->
            <div style="clear: both;">
              <el-card
                style="
                    margin-top: 10px;
                    padding-bottom: 10px;
                    box-shadow: 1px 2px 5px #8c939d;
                    width: 100%;"
                shadow="hover">

                <template v-if="intentionList.length != 0">
                  <el-descriptions v-for="(item,index) in intentionList"    :key="item.id" style="padding: 20px;color: red;"  :title="item.name" :column="2">
                    <template slot="extra">

                      <el-button type="danger" size="medium" @click="handleDeleteIntention(item.id)" class="el-icon-delete-solid">删除</el-button>

                    </template>
                    <el-descriptions-item label="薪资要求">{{item.salary}}</el-descriptions-item>
                    <el-descriptions-item label="期望城市">{{item.city}}</el-descriptions-item>
                    <el-descriptions-item label="工作性质">{{item.workType}}</el-descriptions-item>
                    <el-descriptions-item label="期望行业">
                      <template v-for="(item,index) in item.industryList" >
                        <span>{{item}}</span>
                        <el-divider direction="vertical"></el-divider>
                      </template>
                    </el-descriptions-item>
                  </el-descriptions>
                </template>
                <template v-else>
                  <el-result icon="info" title="新增信息提示" subTitle="当前您的简历还没有求职意向方面的说明哦！">
                    <template slot="extra">
                      <el-empty description="快新增增求职意向吧！"></el-empty>
                    </template>
                  </el-result>
                </template>

              </el-card>
            </div>
            <!--求职意向列表展示-->
          </div>

        </el-card>


      </el-col>
      <!--求职意向  -->
    </el-row>


    <!--新增求职意向对话框-->
    <el-dialog
      title="新增求职意向对话框"
      :visible.sync="dialogFormVisible"
      width="1200px"
      :before-close="handleAddFormClose">
      <el-form :model="intention"  ref="dataAddForm">
        <el-form-item label="期望职位"  label-width="100px">
          <el-cascader ref="myCascader"
                       :options="postTypeTree"
                       :show-all-levels="false"
                       filterable
                       clearable
                       @change="handlePostTypeTreeChange"
          >
          </el-cascader>
        </el-form-item>


        <el-form-item label="期望城市" label-width="100px">
          <el-cascader-panel
            ref="myCascader2"
            :options="cityTree"
            :show-all-levels="false"
            @change="handleCityTreeChange">
          </el-cascader-panel>
        </el-form-item>

        <el-form-item label="期望行业" label-width="100px">
          <el-cascader-panel
            v-model="intention.industry"
            :options="industryTree"
            :show-all-levels="false"
            :props="{ multiple: true }"
            @change="handleIndustryTreeChange">
          </el-cascader-panel>

        </el-form-item>


        <el-form-item label="薪资" prop="salary" label-width="100px">
          <el-select v-model="intention.salary" placeholder="薪资">
            <el-option label="3K-5K" value="3K-5K"></el-option>
            <el-option label="5K-10K" value="5K-10K"></el-option>
            <el-option label="10K-15K" value="10K-15K"></el-option>
            <el-option label="15K-20K" value="15K-20K"></el-option>
            <el-option label="20K-30K" value="20K-30K"></el-option>
            <el-option label="30K-50K" value="30K-50K"></el-option>
            <el-option label="50K以上" value="50K以上"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="工作性质" prop="workType" label-width="100px">
          <el-checkbox-group v-model="intention.workType">
            <el-checkbox label="全职" name="type"></el-checkbox>
            <el-checkbox label="兼职" name="type"></el-checkbox>
            <el-checkbox label="实习" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>




      </el-form>


      <div slot="footer" class="dialog-footer">
        <el-button @click="handleAddFormClose()">取 消</el-button>
        <el-button type="primary" @click="handleAdd('dataAddForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!--新增求职意向对话框-->
  </div>
</template>
<script>
import {getIntentionList,save,deleteIntention} from "@/api/intention";
import {getResume} from "@/api/resume";
import {getIndustryTree} from "@/api/industry";
import {getPostTypeTree} from "@/api/postType";
import {getCityTree} from "@/api/dict";
import {updateJobStatus} from "@/api/resume";
export default {
  name: "index",
  data() {
    return {
      wrapperVisible:false, //展示展示框状态
      formData:{
        jobStatus:"在校-正在找工作",
        name:"",
      },//表单数据
      intention:{workType:[]},//求职意向
      resumeInfo:{},//简历信息
      dialogFormVisible:false,//新增求职意向可见性
      intentionList:[],//求职意向数组
      industryTree: [],//行业树
      postTypeTree: [],//职位树
      cityTree:[],//城市树
      industries:[],//行业
    }
  },
  created() {
    this.getResume()
    this.getIndustryTree()
    this.getPostTypeTree()
    this.getCityTree()
    this.getIntentionList()
  },
  methods: {
    //获取学生求职意向列表
    getIntentionList(){
      console.log("======系统正在获取学生求职意向列表========")
      getIntentionList().then(res=>{
        this.intentionList = res.data;
      })
      console.log("======系统获取学生求职意向列表成功！！========")
    },
    //获取学生简历
    getResume(){
      getResume().then(res=>{
        this.resumeInfo = res.data;
      })
    },
    //获取行业树
    getIndustryTree(){
      console.log("======系统正在获取行业树========")
      getIndustryTree().then(res=>{
        this.industryTree = res.data;
      })
      console.log("======系统正在获取行业树成功！！========")
    },
    //获取职位类型树
    getPostTypeTree(){
      console.log("======系统正在获取职位类型树========");
      getPostTypeTree().then(res=>{
        this.postTypeTree = res.data;
      })
      console.log("======系统获取职位类型树成功！！========");

    },
    //获取城市类型树
    getCityTree(){
      console.log("======系统正在获取城市类型树========")
      getCityTree().then(res=>{
        this.cityTree = res.data;
      })
      console.log("======系统获取城市类型树成功！！========")
    },
    //弹出添加窗口的方法
    handleAddDialog() {
      this.resetForm()
      this.dialogFormVisible = true
    },
    //处理添加的方法
    handleAdd(formName) {
      console.info("【系统正在进行增加简历....】")
      this.$refs[formName].validate((valid) => {
        if (valid) {
          save(this.intention).then(res=>{
            this.$message({
              showClose: true,
              message: '恭喜你，操作成功',
              type: 'success',
              onClose: () => {
              }
            });
            this.dialogFormVisible = false
            this.getIntentionList()
            this.resetForm()
          })
        }
      });
      console.info("【======系统增加简历成功！====】")
    },
    //关闭新增表单窗口的方法
    handleAddFormClose() {
      this.dialogFormVisible = false
      this.resetForm();
    },
    //重置表单的方法
    resetForm() {
      this.formData = {}
      this.roleFormData = {}
    },
    //处理删除求职意向
    handleDeleteIntention(id){
      console.log("======系统正在处理删除求职意向========")
      this.$confirm('此操作将永久删除该求职意向, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteIntention(id).then(res=>{
          this.$notify.success({
            title: '【成功Tips】',
            message: '系统处理删除求职意向成功！！'
          })
          this.getIntentionList()
        })
      }).catch(() => {

        this.$notify.info({
          title: '【成功Tips】',
          message: '系统已取消删除求职意向！！'
        })
        this.getIntentionList()
      })
      console.log("======系统处理删除求职意向成功！！========")
    },
    //处理职位类型树选择变化的方法 完成 职位名称的获取
    handlePostTypeTreeChange(value){
      //获取到级联选择器的label值
      let labelArray =  this.$refs.myCascader.getCheckedNodes()[0].pathLabels
      //获取最后一级
      const name = labelArray[2]
      //赋值给数据模型intention
      this.intention.name = name

    },
    //处理城城市选择变化的方法 完成 职位名称的获取
    handleCityTreeChange(value){
      //获取到级联选择器的label值
      let labelArray =  this.$refs.myCascader2.getCheckedNodes()[0].pathLabels
      //获取最后一级
      const name = labelArray[1]
      //赋值给数据模型intention
      this.intention.city = name
    },
    //选中行业树变化
    handleIndustryTreeChange(checkNodes){
      //选择的行业大于3，提示错误框。
      if (checkNodes.length > 3){
        this.$notify.error({
          title: '【错误Tips】',
          message: '最多只能选择三个！'
        })
      }

    },

  }
}
</script>

<style scoped>

.s-scrollbar {
  overflow: hidden;
  position: relative;
}
/*求职状态标题*/
.job-status__title {
  float: left;
  margin-bottom: 29px;
  font-size: 24px;
  color: #333;
  letter-spacing: 1.21px;
}
/*求职状态标题*/

/*求职状态必填标识项*/
.job-status__title__must {
  background: #ef7c67;
  border-radius: 2px;
  display: inline-block;
  width: 34px;
  height: 16px;
  font-size: 12px;
  text-align: center;
  line-height: 16px;
  color: #fff;
  vertical-align: 4px;
}
/*求职状态必填标识项*/

/*个人信息包裹容器*/
.profile-pre-wrapper {
  clear: both;
  position: relative;
  color: #333;
  padding-top: 20px;
}
/*个人信息包裹容器*/
</style>
